<template>
  <div class="attr" v-if="attrData">
    <div class="color" v-if="attrData[0]">
        <div class="headerColor">
            <span>{{attrData[0].title}}</span>
            <span class="right">
                <b>{{colorSelect.join(',')}}</b>
                <van-icon name="arrow-down" />
            </span>
        </div>
      <ul class="filter" >
        <li v-for="(item) in attrData[0].values " :key="item.code" >
            <van-button round v-bind:class="{activeClass: colorSelect.some(it => {return it === item.code } )}" plain type="primary"  @click="handleClickColor(item.code)">{{item.code}}</van-button>
        </li>
      </ul>
    </div>
    <div class="size" v-if="attrData[1]">
        <div class="headerSize">
            <span>尺寸</span>
            <span class="right">
                <b>{{sizeSelect.join(',')}}</b>
                <van-icon name="arrow-down" />
            </span>
        </div>
      <ul class="filter" >
        <li v-for="(item ) in attrData[1].values " :key="item.code" >
            <van-button type="primary" round plain v-bind:class="{activeClass: sizeSelect.some(it => {return it === item.code } )}" @click="handleClickSize(item.code)" >{{item.code}}</van-button>
        </li>
      </ul>
    </div>
    <div class="footer">
        <van-button round  color="#794dfa" type="info" @click="handleReset">重置</van-button>
        <van-button round color="#794dfa" type="info" @click="handleSure">确定</van-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Col, Row , Icon , Button } from "vant";
import axios from "axios";
Vue.use(Icon);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);

export default {
  props:['sortId' , 'attrDatas'],
  data() {
    return {
      attrData: this.attrDatas,
      colorSelect:[],
      sizeSelect:[],
      isActive:false,
      activeClass:'activeClass',
      normalClass:'normalClass',
      // cataId:this.$route.params.cataId,
      // sortId:this.$route.params.sortId,
      currentSize:'',
      currentColor:'',
      // attr:

    };
  },
  // computed:{
  //   colorActive(){
  //   let   colorSelect = this.colorSelect.some(item => {
  //     return item === this.currentColor
  //   } )
  //   console.log(colorSelect)
  //     return colorSelect
  //   },
  //   sizeActive(){
  //     let   sizeSelect = this.colorSelect.some(item => {
  //     return item === this.currentSize
  //   } )
  //     return sizeSelect
  //   }
  // },
  async created(){
   
  await axios
  .post("/getFilterAttr", {
    categoryId: this.sortId,
    pageFlag: 1
  })
  .then(result => {
    
    this.attrData = result.data.data.facet
  });
  },
  methods : {
    handleReset(){
      this.colorSelect = []
      this.sizeSelect = []
    },
    handleSure(){
       this.attr ={
      color:this.colorSelect,
      size:this.sizeSelect
    }
    this.$emit('selectAttr' , JSON.stringify(this.attr))
    },
      handleClickColor(color ){
        this.currentColor = color
        let   colorSelect = this.colorSelect.some(item => {
         return item === this.currentColor
       } )
        if( colorSelect  ){
          return 
        }else{
          this.colorSelect.push(color)
        }
      },
      handleClickSize(size){
        this.currentSize = size
            let   sizeSelect = this.colorSelect.some(item => {
            return item === this.currentSize
          } )
          if( sizeSelect ){
            return
          }else{
            this.sizeSelect.push(size)
          }
      }
  }
};
</script>

<style lang="stylus" scoped>

    .attr
        display flex
        flex-direction column
        width 5rem
        height 100%
        padding 0 0.32rem 
        .color
            // flex 1
            .headerColor
                display flex
                justify-content space-between
                flex-direction row
                align-items center
                font-size .32rem
                .filter
                    display flex
                    width 100%
                    height 40% !important
                    justify-content flex-start !important
                    align-content center
                    flex-wrap wrap
                    li 
                        margin-top .2rem
                        width 33% !important
                        height .6rem !important
                        text-align center
                        padding 0 !important
                    
                    
                    
        .size
            // flex 1
            .headerSize 
                display flex
                justify-content space-between
                align-items center
                flex-direction row
                font-size .32rem
        .footer
            display flex
            position fixed
            bottom .3rem 
            left .1rem 
            justify-content space-between
            align-items center
            flex-direction row
            height .8rem
            width 100%
            button
                width 45%
                height 75%

</style>

<style lang="stylus" scoped>
    .right
        font-size 0.24rem  
        color #7f4395
        font-family PingFangSC-Regular

    .filter
        display flex
        width 100%
        height 80% !important
        justify-content flex-start !important
        align-content center
        flex-wrap wrap
        li 
            margin-top .1rem
            width 30% !important
            font-size 12px
            height .4rem !important
            text-align center
            margin-right .1rem
            padding 0 !important

    button
        font-size .08rem
        width 100% !important
        height 100% !important
        border-radius 4px
        padding 0
        margin 0 auto
        .van-button__content
            width 100%
            .van-button__text
                font-size 12px
                width 100%

// .activeClass
//     color red !important 
 
// .normalClass
//     color black  !important 
</style>
<style>
  .van-button--normal{
      padding: 0;
  }
  .activeClass{
    color: red !important;
  }
  .normalClass{
    color: gray !important;
  }
  
</style>

